<template>
  <div class="container">
    <!-- 文章分类栏 -->
    <van-tabs swipeable @change="switchTab" v-model="activeIndex">
      <van-tab :key="item.id" v-for="item in Channels" :title="item.name">
        <!-- 对应频道的新闻列表 -->
        <ArticleList :channelId="item.id" ref="alist" />
      </van-tab>
    </van-tabs>
    <!-- 右侧图标 -->
    <span class="bar_btn">
      <van-icon name="wap-nav" @click="showEditChannel = true"></van-icon>
    </span>
    <ChannelEdit
      v-model="showEditChannel"
      :Channels="Channels"
      :activeIndex.sync="activeIndex"
    />
  </div>
</template>

<script>
// 导入获取频道的方法
import { getMyChannels } from '../../api/channel'
// 导入新闻列表显示区子组件
import ArticleList from './articleList'
// 导入频道管理显示区子组件
import ChannelEdit from './components/channel-edit'
export default {
  name: 'home-index',
  components: {
    // 注册新闻列表区子组件
    ArticleList,
    ChannelEdit
  },
  // 处理refresh_token失效，回跳缓存不刷新问题
  watch: {
    '$store.state.user.refresh_token' () {
      console.log('refresh')
      this.getMyChannels()
    }
  },
  data () {
    return {
      // 频道列表数据
      Channels: [],
      // 控制频道管理弹层的显示隐藏
      showEditChannel: false,
      // 当前选择频道的索引
      activeIndex: 0
    }
  },
  created () {
    this.getMyChannels()
    console.log('home-index')
  },
  methods: {
    // 获取频道数据列表
    async getMyChannels () {
      const { data } = await getMyChannels()
      this.Channels = data.channels
    },
    // 切换标签栏时触发
    switchTab (i) {
      // 当前选中的频道索引
      this.activeIndex = i
      // 通过ref获取组件实例 => 调用子组件的方法
      // eslint-disable-next-line no-unused-expressions
      this.$refs.alist[i]?.scrollToPos()
    }
  }
}
</script>

<style scoped lang='less'>
// 频道模块样式
.van-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
  /deep/ .van-tabs__wrap {
    height: 36px;
    padding-right: 36px;
    .van-tab {
      line-height: 36px;
    }
    .van-tabs__line {
      background-color: #3296fa;
      height: 2px;
    }
  }
  /deep/ .van-tabs__content {
    flex: 1;
    overflow: hidden;
  }
  /deep/ .van-tab__pane {
    height: 100%;
    .scroll-wrapper {
      height: 100%;
      overflow-y: auto;
    }
  }
}
.bar_btn {
  width: 36px;
  height: 35px;
  position: absolute;
  top: 0;
  right: 0;
  &::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999;
    box-shadow: 0 0 10px #999;
    transform: scale(1, 0.6);
  }
  .van-icon-wap-nav {
    width: 100%;
    height: 100%;
    background: #fff;
    text-align: center;
    line-height: 35px;
    position: relative;
    z-index: 1000;
    &::before {
      font-size: 20px;
    }
  }
}
</style>
